<div style="min-width: 900px;height: 800px;">
<div class="layui-card-body" >
    <link rel="stylesheet" href="/static/admin/editor/css/editormd.min.css" />
    <script src="/static/admin/editor/examples/js/jquery.min.js"></script>
    <script src="/static/admin/editor/editormd.min.js"></script>
    <form class="layui-form" action="{:url()}"  method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">文档名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" value="{$info.title|default=''}" class="layui-input" autocomplete="off"
                       placeholder="不要超过32个汉字">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文档类型</label>
            <div class="layui-input-inline">
                <select name="doc_type" lay-search>
                    <volist name="doc_type" id="vo" key="k">
                        <option value="{$k}"
                        <notempty name="info.status">
                            <eq name="$k" value="$info.doc_type">selected="selected"</eq>
                        </notempty>
                        > {$vo} </option>
                    </volist>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文档可见</label>
            <div class="layui-input-inline">
                <select name="doc_view" lay-search>
                    <volist name="doc_view" id="vo" key="k">
                        <option value="{$k}"
                        <notempty name="info.doc_view">
                            <eq name="$k" value="$info.doc_view">selected="selected"</eq>
                        </notempty>
                        > {$vo} </option>
                    </volist>
                </select>
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">附件信息</label>
            <div class="layui-input-block">
                <input name="file_path" id="file_path" type="text" value="{$info.file_path|default=''}"
                       class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input id="img_input" type="file"  style=" display: none;"/>
                <label for="img_input" class="layui-btn ">选择附件上传</label>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">详情</label>
            <div class="layui-input-block">
                <div id="editormd" >
                    <textarea style="display:none;" name="info">{$info.info|raw|default=""}</textarea>
                </div>
            </div>
        </div>

        <input type="hidden" name="project_id" value="{$info.project_id|default=''}">
        <input type="hidden" name="id" value="{$info.id|default=''}">
        <input type="hidden" name="info_id" value="{$info.info_id|default=''}">
        <style>
            .task-list-item-checkbox{
                display: inline !important;
            }
            .editormd-code-toolbar select{
                display: inline !important;
            }
            .c_time{
                float: right;
                margin: 5px;
                bottom:5px;
            }
            body{
                background: #fff
            }
            #infotitle{
                text-align: center;
            }
        </style>
    </form>
</div>
</div>
<script type="text/javascript">
    layui.use(['form', 'layer', 'formSelects'], function () {
        var form = layui.form
            , formSelects = layui.formSelects
            , $ = layui.$
            , laydate = layui.laydate;

        var editor = editormd("editormd", {
            placeholder:'本编辑器支持Markdown编辑，左边编写，右边预览',
            toc:true,
            tocm:true,
            tocDropdown:true,
            width:850,
            height:700,
            saveHTMLToTextarea : true,
            imageUpload:true,
            htmlDecode : true,
            //markdown: "",
            autoLoadModules : true,
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            emoji: true,
            taskList: true,          // Enable Github Flavored Markdown task lists
            path : "/static/admin/editor/lib/" // Autoload modules mode, codemirror, marked... dependents libs path
        });
        $('#file_path').click(function () {
            window.open($('#file_path').val());
        });
             $('#img_input').on('change',function () {
                 var index = layer.load(1);
            var files=this.files[0];
            if(files){
                $.ajax({
                    type: "post",
                    url: "/qiniu/gettoken",
                    async: true,
                    success: function (res) {
                        if (res.code == 0) {
                            var token = res.uptoken;

                            console.log(files);
                            var fileName = res.path + files.name;
                            var downloadurl = res.downloadurl;
                            var config = {
                                retryCount: 6,
                            };
                            var putExtra = {
                                fname: "",
                                params: {},
                                mimeType: null
                            };
                            var observable = qiniu.upload(files, fileName, token, putExtra, config);
                            var subscription = observable.subscribe(
                                {
                                    next(res) {
                                        console.log(res)
                                    },
                                    error(res) {
                                        console.log(res)
                                    },
                                    complete(res) {
                                        console.log(res);
                                        layer.close(index);
                                        $("#file_path").val(downloadurl + '?file=' + res.key)
                                    }
                                }
                            );

                        } else {
                            console.log(res.msg)
                        }

                    }
                });
            }

        });



        var E = window.wangEditor
        var editor = new E('#info')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'image',  // 插入图片
            'table',  // 表格

            'undo',  // 撤销
            'redo'  // 重复
        ]
        editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
        editor.customConfig.uploadImgTimeout = 30000
        editor.customConfig.uploadFileName = 'file'
        editor.customConfig.zIndex = 100;
        editor.customConfig.debug = true;
        editor.customConfig.onchange = function (html) {
            $('#newinfo').html(html)
        }
        editor.customConfig.customUploadImg = function (files, insert) {
            var index = layer.load(1);
            $.ajax({
                type: "post",
                url: "/qiniu/gettoken",
                async: true,
                success: function (res) {
                    if (res.code == 0) {
                        var token = res.uptoken;
                        var fileName = res.path + files[0].name;
                        var downloadurl = res.downloadurl;
                        var config = {
                            retryCount: 6,
                        };
                        var putExtra = {
                            fname: "",
                            params: {},
                            mimeType: null
                        };
                        var observable = qiniu.upload(files[0], fileName, token, putExtra, config);
                        var subscription = observable.subscribe(
                            {
                                next(res) {
                                    console.log(res)
                                },
                                error(res) {
                                    console.log(res)
                                },
                                complete(res) {
                                    layer.close(index);
                                    insert(downloadurl + '?file=' + res.key)
                                }
                            }
                        );
                    } else {
                        console.log(res.msg)
                    }

                }
            });
        }
        editor.create()

    });

</script>






